<template>
  <Card dis-hover :bordered="false">
    <Form>
      <Row :gutter="24" type="flex" class="ivu-mb-16">
        <Col>
        <Button v-hasC="{
                          name: 'v1-automation-relation-update-relation',
                          flag: 'v1/automation/relation/update-relation',
                      }" type="primary" @click="handleOpenDrawer(-1)">新增</Button>
        </Col>
      </Row>
    </Form>
    <div class="i-table-no-border">
      <Table highlight-row ref="table" :columns="columns" :loading="loading" :data="data">
        <template slot="room" slot-scope="{ row }">
          <tag v-for="item in row.room" :key="item.index">{{
            item
            }}</tag>
        </template>
        <template slot-scope="{ row }" slot="info">
          <a v-hasC="{
                          name: 'v1-automation-relation-update-relation2',
                          flag: 'v1/automation/relation/update-relation',
                      }" href="javaScript:;" @click="handleOpenDrawer(row)">编辑</a>
          <Divider v-hasCC="[
                          {
                            name: 'v1-automation-relation-update-relation2',
                            flag: 'v1/automation/relation/update-relation',
                          },
                          {
                              name: 'v1-automation-relation-delete-relation',
                              flag: 'v1/automation/relation/delete-relation',
                          },
                      ]" type="vertical" />
          <a v-hasC="{
                          name: 'v1-automation-relation-delete-relation',
                          flag: 'v1/automation/relation/delete-relation',
                      }" @click="deletePush(row)">删除</a>
        </template>
      </Table>
      <Modal v-model="modal" width="650" :title="edit ? `编辑` : `新增`" :mask-closable="false"
        @on-cancel="handleDrawerCancel(modalname)">
        <Form :ref="modalname" :model="formItem" :rules="createRules" :label-width="100">
          <FormItem label="标题" prop="title">
            <Input v-model="formItem.title" placeholder="请输入标题" />
          </FormItem>
          <FormItem label="钉钉token：" prop="token">
            <Input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" v-model="formItem.token"
              placeholder="请输入钉钉token" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="handleDrawerCancel(modalname)">取消</Button>
          <Button type="primary" :loading="remarksloading" @click="handleSubmit(modalname)">确定</Button>
        </div>
      </Modal>
    </div>
  </Card>
</template>

<script>
  import {
    noPush,
    addPush,
    deletePush,
  } from "@/api/TApi/index.js";
  export default {
    /*  import引入的组件注入到components对象中使用  */
    components: {},
    data() {
      const validateToken = (rule, value, callback) => {
        if (value.includes("https://")) {
          callback();
        } else {
          callback(new Error("请正确输入包含https的钉钉token"));
        }
      };
      return {
        total: 0, //  分页总数
        remarksloading: false,
        // pageOpts: [10, 20, 30, 50], //  分页每页数量
        // params: { page: 1, pageSize: 10 }, //  请求参数
        edit: true, //  编辑true,新增false
        loading: false, //  加载中
        modal: false, //  模态框开启属性
        modalname: "formItem",
        grid: { xl: 4, lg: 8, md: 12, sm: 24, xs: 24 }, //  layout布局
        isEdit: {},
        columns: [
          {
            title: "名称",
            key: "title",
            tooltip: true,
            ellipsis: true,
            minWidth: 118,
          },
          {
            title: "钉钉机器人token",
            key: "dingtalk_id",
            tooltip: true,
            minWidth: 300,
          },
          {
            title: "操作人",
            key: "operation_name",
            width: 100,
          },
          {
            title: "更新时间",
            key: "updated_at",
            minWidth: 150,
          },
          { title: "操作", slot: "info", width: 150 },
        ], // 列表表头
        data: [], // 列表数据
        formItem: {
          token: "",
          title: "",
        },
        // 模态框数据
        createRules: {
          title: [
            {
              trigger: "blur",
              required: true,
              message: "请输入标题",
            },
          ],
          token: [
            {
              validator: validateToken,
              trigger: "blur",
              required: true,
            },
          ],
        }, // 模态框验证规则
      };
    },
    /* 监听属性 类似于data概念 */
    computed: {},
    watch: {},
    /* 创建完成能访问this实例 */
    created() { },
    /* 函数方法集合 */
    methods: {
      /* @函数功能: 初始化 */
      initial() {
        this.askData();
      },

      /* @函数功能: 请求数据 */
      askData() {
        noPush().then((res) => {
          this.data = res;
        });
      },
      deletePush(row) {
        this.$Modal.confirm({
          title: "删除提示",
          content: "请确认是否删除到诊提醒设置？",
          loading: true,
          onOk: () => {
            deletePush({
              id: row.id,
            })
              .then((res) => {
                this.$Message.success("删除成功");
                this.$Modal.remove();
                this.askData();
              })
              .catch((err) => {
                this.$Modal.remove();
              });
          },
        });
      },

      /* @函数功能: 打开新增或编辑 */
      handleOpenDrawer(row) {
        this.formItem.token = "";
        this.formItem.title = "";
        if (row === -1) {
          this.edit = false;
          this.modal = true;
        } else {
          this.edit = true;
          this.isEdit = row;
          this.formItem.token = row.dingtalk_id
          this.formItem.title = row.title
          this.modal = true;
        }
      },
      /* @函数功能: 新增或编辑提交 */
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let params = {
              id: "",
              title: this.formItem.title,
              dingtalk_id: this.formItem.token
            }
            let message = this.edit ? "编辑成功" : "新增成功"
            params.id = this.edit ? this.isEdit.id : ""
            addPush(params).then(res => {
              this.askData();
              this.$Message.success(message);
              this.modal = false;
            }).finally(() => {
              this.remarksloading = false;
            });
          }
        })

      },
      /* @函数功能: 取消新增或编辑 */
      handleDrawerCancel(name) {
        this.formItem = {
          token: "",
          title: "",
        };
        this.modal = false;
      },
    },
    /* 挂载完成能访问DOM元素 */
    mounted() {
      this.initial();
    },
    /* 创建之前 */
    beforeCreate() { },
    /* 挂载之前 */
    beforeMount() { },
    /* 更新之前 */
    beforeUpdate() { },
    /* 更新之后 */
    updated() { },
    /* 销毁之前 */
    beforeDestroy() { },
    /* 销毁完成 */
    destroyed() { },
    /* 有keep-alive缓存即会触发 */
    activated() { },
  };
</script>

<style lang="less" scoped></style>